import React from "react";
import styles from "./settings.module.scss";
import { Cell, Image } from "react-vant";
import { useNavigate } from "react-router-dom";

export default function Settings() {
  const navigate = useNavigate();
  return (
    <div className={styles.box}>
      <div className={styles.sets_sheader}>
        {/* 标题头 */}
        <div className={styles.sets_sheaderr}>
          <h1>{"<"} </h1>
          <span>设置</span>
        </div>
        <div className={styles.hus_setmain}>
          {Array.from({ length: 1 }).map((_, idx) => (
            <Cell
              center
              key={idx}
              title="头像名称的位置"
              icon={<Image width={44} height={44} src="/demo_1.jpg" round />}
              isLink
              onClick={() => {
                navigate("/personaldetails");
              }}
            />
          ))}
          {Array.from({ length: 1 }).map((_, idx) => (
            <Cell
              center
              key={idx}
              title="修改密码"
              isLink
              onClick={() => {
                navigate("/changepassword");
              }}
            />
          ))}
          {Array.from({ length: 1 }).map((_, idx) => (
            <Cell
              center
              key={idx}
              title="清楚缓存"
              isLink
              onClick={() => {
                navigate("/Buffermemory");
              }}
            />
          ))}
          {Array.from({ length: 1 }).map((_, idx) => (
            <Cell
              center
              key={idx}
              title="屏幕亮度"
              isLink
              onClick={() => {
                navigate("/Screenluminance");
              }}
            />
          ))}
          {Array.from({ length: 1 }).map((_, idx) => (
            <Cell
              center
              key={idx}
              title="版本检测"
              isLink
              onClick={() => {
                navigate("/Versions");
              }}
            />
          ))}
          {Array.from({ length: 1 }).map((_, idx) => (
            <Cell
              center
              key={idx}
              title="帮助中心"
              isLink
              onClick={() => {
                navigate("/Helpcenter");
              }}
            />
          ))}
          {Array.from({ length: 1 }).map((_, idx) => (
            <Cell
              center
              key={idx}
              title="关于我们"
              isLink
              onClick={() => {
                navigate("/AboutUs");
              }}
            />
          ))}
          {Array.from({ length: 1 }).map((_, idx) => (
            <Cell
              center
              key={idx}
              title="邀请好友"
              isLink
              onClick={() => {
                navigate("/Invitefriends");
              }}
            />
          ))}
        </div>
        <button>退出登录</button>
      </div>
    </div>
  );
}